<template>
  <div class="exercise">
    <codemirror style="width: 500px;height: 500px" v-model:value="codeSnippets" :options="cmOptions" />
  </div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    const codeSnippets = ref('666');
    const cmOptions = reactive({
      autorefresh: true,
      tabSize: 4,
      mode: "text/javascript",
      theme: "ayu-mirage",
      line: true,
      viewportMargin: Infinity, //处理高度自适应时搭配使用
      highlightDifferences: true,
      autofocus: false,
      indentUnit: 2,
      smartIndent: true,
      lineWrapping: true,
      // readOnly: true, // 只读
      showCursorWhenSelecting: true,
      firstLineNumber: 1,
    });

    return { codeSnippets, cmOptions };
  },
};
</script>

<style lang="scss">
.CodeMirror {
  height: 50vh;
  width: 50vw;
  direction: ltr;
}
</style>
